<template>
	<view>

		<cover-view class="button">
			<button :disabled="canvasImages != '' ? false : true" @click.stop.prevent="previewHandle"
				style="width: 350rpx;background-color: #4578F7;color: #fff;z-index: 999;">保存海报</button>
		</cover-view>
		<view class="">
			<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :goodsTitle="goodsTitle"
				:shareImage="shareImage" :avater="avater" :phone="phone" :qrSize="qrSize" :qrUrl="qrUrl"
				@success="shareSuccess">
			</shareImages>
		</view>
		<cover-view class="yaoqin_box" @click="toList">
			邀请列表
		</cover-view>
	</view>
</template>

<script>
	import shareImages from '../../components/hj-placard/shareImages.vue'
	export default {
		components: {
			shareImages
		},
		data() {
			return {
				canvasImages: '',
				canvasWidth: 390, // 宽度
				canvasHeight: 844, // 高度
				goodsTitle: '', // 商品宣传标题
				shareImage: 'https://baijixing.oss-cn-chengdu.aliyuncs.com/2025/APRIL/21/1745222511957_2ca4db3a-d5b5-40bd-b163-ce28aeeaacef.png', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: '', // 生成二维码的链接
				avater: '',
				phone: ''
			}
		},
		onLoad() {
			let that = this
			this.getInfo()
		},
		methods: {
			// 生成分享图片
			createsShareImage() {
				// console.log(this.$refs.canvas)
				// #ifdef H5
				this.$refs.canvas.canvasCreate();
				// #endif

				// #ifdef MP-WEIXIN
				this.$refs.canvas.onCanvas();
				// #endif
			},
			// 预览图片
			previewHandle() {
				uni.previewImage({
					urls: [this.canvasImages],
				});
			},
			// 回调图片地址
			shareSuccess(e) {
				this.canvasImages = e
			},
			// 分享
			onShareAppMessage(res) {
				// if (res.from === 'button') {
				// 	console.log(res.target)
				// }
				return {
					title: '百吉星推广员分享',
					path: this.canvasImages
				}
			},
			getInfo() {
				let that = this
				this.$request("kehu/user/info").then(res => {
					this.phone = res.data.phone
					this.avater = res.data.avatar
					this.goodsTitle = res.data.name
					// #ifdef MP-WEIXIN
					this.httpRequest()
					// #endif
					// #ifdef H5
					this.qrUrl = "https://h5.baijixing.com.cn/#/pages/tab1?phone=" + this.phone
					setTimeout(() => {
						that.createsShareImage()
					}, 1000)
					// #endif
					this.showCode = true
				})
			},
			httpRequest() {
				let that = this
				this.$request("kehu/wxQRCode/qRCode", {
					phone: this.phone,
					page: 'pages/tab1'
				}, 'get').then(res => {
					this.qrUrl = `data:image/jpeg;base64,${res.data}`
					setTimeout(() => {
						that.createsShareImage()
					}, 1000)
				});
			},
			toList() {
				uni.navigateTo({
					url: '/pages/userQing/List/List'
				})
			},
		}
	}
</script>

<style scoped>
	.button {
		display: flex;
		position: fixed;
		bottom: 13.5%;
		left: 28%;
		z-index: 9999;
	}

	.yaoqin_box {
		width: 200rpx;
		height: 60rpx;
		background-color: #4578F7;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		position: fixed;
		top: 25%;
		right: 0%;
		z-index: 999;
		border-radius: 20rpx 0 0 20rpx;
	}
</style>